<template>
  <div class="login-box" v-if="loginFlag" @click.self="close">
    <div class="close">
      <!-- <i class="el-icon-close"></i> -->
      <el-icon size="36px" color="#fff" @click="close">
        <CloseBold />
      </el-icon>
    </div>
    <div class="login-form">
      <template v-if="type == 'login'">
        <div class="title">欢迎登录美拍绵阳</div>
        <el-form
          :model="loginForm"
          label-width="80px"
          ref="form"
          @keyup.enter="login(form)"
          :rules="rules"
          status-icon
        >
          <el-form-item label="登录名" prop="UserAccount">
            <el-input v-model="loginForm.UserAccount"></el-input>
          </el-form-item>
          <el-form-item label="密  码" prop="PassWord">
            <el-input type="password" v-model="loginForm.PassWord"></el-input>
          </el-form-item>
        </el-form>
        <el-button
          @click="login(form)"
          type="primary"
          style="width: 95%; margin: 0 5%"
          :loading="loading"
        >
          <el-icon>
            <Avatar />
          </el-icon>
          <span>登录</span>
        </el-button>
        <div class="tip" @click="changeType('register')">用户注册</div>
      </template>
      <template v-if="type == 'register'">
        <div class="title">注册用户</div>
        <div class="back" @click="changeType('login')">
          <el-icon><ArrowLeftBold /></el-icon>
          <span>返回</span>
        </div>
        <el-form
          :model="registerForm"
          status-icon
          :rules="rules2"
          ref="form2"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="UserAccount">
            <el-input v-model="registerForm.UserAccount"></el-input>
          </el-form-item>
          <el-form-item label="密  码" prop="PassWord">
            <el-input
              type="password"
              minlength="8"
              v-model="registerForm.PassWord"
            ></el-input>
          </el-form-item>
          <el-form-item label="名  称" prop="UserName">
            <el-input v-model="registerForm.UserName"></el-input>
          </el-form-item>
          <el-form-item label="手  机" prop="PhoneNumber">
            <el-input v-model="registerForm.PhoneNumber"></el-input>
          </el-form-item>
          <el-form-item label="Email" prop="Email">
            <el-input v-model="registerForm.Email"></el-input>
          </el-form-item>
        </el-form>
        <el-button
          @click="register(form2)"
          type="primary"
          style="width: 95%; margin: 0 5%"
        >
          <el-icon>
            <Check />
          </el-icon>
          <span>提交</span>
        </el-button>
      </template>
    </div>
  </div>
</template>

<script>
import { computed, onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import { storeLogin } from "@/store/login";
import { storeUser } from "@/store/user";
import { storeToRefs } from "pinia";
import { ElNotification } from "element-plus";
import * as LoginApi from "@/api/login";
import bus from '@/utils/bus'
export default {
  name: "",
  components: {},
  setup(props, ctx) {
    const userStore = storeUser();
    const loginStore = storeLogin();
    const close = () => {
      loginStore.setLogin(false);
    };
    const loginForm = reactive({
      UserAccount: "",
      PassWord: "",
    });
    const registerForm = reactive({
      UserAccount: "",
      PassWord: "",
      Email: "",
      UserName: "",
      PhoneNumber: "",
    });
    const rules = reactive({
      UserAccount: [
        { required: true, message: "请输入用户名", trigger: "blur" },
      ],
      PassWord: [{ required: true, message: "请输入密码", trigger: "blur" }],
    });
    const rules2 = reactive({
      UserAccount: [
        { required: true, message: "请输入用户名", trigger: "blur" },
      ],
      PassWord: [
        { required: true, message: "请输入密码", trigger: "blur" },
        { min: 8, message: "密码不能少于8位", trigger: "blur" },
      ],
      Email: [{ required: true, message: "请输入邮箱", trigger: "blur" }],
      UserName: [{ required: true, message: "请输入名称", trigger: "blur" }],
      PhoneNumber: [
        { required: true, message: "请输入手机号码", trigger: "blur" },
      ],
    });
    const type = ref("login");
    const changeType = (v) => {
      type.value = v;
    };
    const form = ref();
    const form2 = ref();
    const loading = ref(false);
    const login = (formEl) => {
      if (!formEl) return;
      formEl.validate(async (value, fields) => {
        if (value) {
          loading.value = true;
          let { data } = await LoginApi.login(loginForm);
          if (data.Status == 0) {
            if(!data.UserData){
                 ElNotification({
                  type: "error",
                  title: "登录失败！",
                  message: data.Message,
                });
              loading.value = false;
              return
            }
            localStorage.setItem("token", data.UserData.Token);
            let { data: res } = await LoginApi.getUserInfo({
              UserToken: data.UserData.Token,
            });
            if (res.Status == 0) {
              if (res.UserData) {
                userStore.setUser(res.UserData);
                loginStore.setLogin(false);
                ElNotification({
                  type: "success",
                  title: "登录成功！",
                });
                bus.$emit('search',[{label:'CurrentUserAccount',value:res.UserData.UserAccount}])
                bus.$emit('searchInit')
              } else {
                ElNotification({
                  type: "error",
                  title: "登录失败！",
                  message: res.Message,
                });
              }
              loading.value = false;
            } else {
              ElNotification({
                type: "error",
                title: "登录失败！",
                message: res.Message,
              });
              loading.value = true;
            }
          } else {
            ElNotification({
              type: "error",
              title: "登录失败！",
            });
          }

          loading.value = false;
        } else {
          // console.log()
          ElNotification({
            type: "error",
            title: "登录失败！",
          });
        }
      });
    };
    const register = (formEl) => {
      if (!formEl) return;
      formEl.validate(async (value, fields) => {
        if (value) {
          let { data } = await LoginApi.regist(registerForm);
          if (data.Status != 0) return;
          ElNotification({
            type: "success",
            title: "注册成功！",
            // message:fields
          });
          changeType("login");
        } else {
          // console.log()
          ElNotification({
            type: "error",
            title: "注册失败！",
          });
        }
      });
    };
    return {
      ...storeToRefs(loginStore),
      close,
      loginForm,
      rules,
      rules2,
      type,
      changeType,
      login,
      form,
      loading,
      form2,
      registerForm,
      register,
    };
  },
};
</script>

<style scoped lang="scss">
.login-box {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  z-index: 2001;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  .close {
    position: absolute;
    right: 50px;
    top: 50px;
    cursor: pointer;
    // width: 100px;
    // height: 100px;
  }
  .login-form {
    width: 360px;
    // height: auto;
    // max-height: 360px;
    // min-height:260px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    // left: 0;
    // right: 0;
    // top: 0;
    // bottom: 0;
    // margin: auto;
    .title {
      text-align: center;
      font-weight: 600;
      font-size: 26px;
      margin-bottom: 20px;
    }
    .tip {
      font-size: 12px;
      margin-top: 20px;
      cursor: pointer;
      text-align: center;
      &:hover {
        color: #08d9e0;
      }
    }
  }
}
.back {
  position: absolute;
  left: 20px;
  top: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
</style>
